<template>
	<view>
		<view class="search_box u-border-top">
			<view class="city_title" @click="show=true">
				<view class="title">
					{{mixinDistrict}}
				</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-search @custom='search' style="width: 80%;" placeholder="请输入地址或自提点名称" v-model="keyword"></u-search>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="point_title">
			附近的自提点
		</view>
		<view>
			<u-radio-group icon-size='30' active-color='#FF0E3D' v-model="buinessId" style="width: 100%;"
				class="point_list">
				<view v-for="(item) in list" :key='item.id'>
					<view class="point_item">
						<view class="left">
							<image class="point_img" :src="item.imgUrl" mode=""></image>
							<view class="point_msg">
								<view class="title">
									{{item.name}}
								</view>
								<view class="distance">
									距离:{{distance(item)}}km
								</view>
								<view class="distance_detail">
									{{item.address}}
								</view>
							</view>
						</view>
						<u-radio :name="item.id">
						</u-radio>
					</view>
					<u-gap height="14" bg-color="#ECECEC"></u-gap>
				</view>

			</u-radio-group>
		</view>

		<u-select value-name='lable' label-name='value' v-model="show" mode="mutil-column-auto" :list="cityData"
			@confirm="confirmCity"></u-select>
		<view class="btn">
			<u-button style="width: 60%;" type='primary' @click="submit">
				确 定
			</u-button>

		</view>

	</view>
</template>

<script>
	import initData from '@/mixin/initData.js'
	import provinceData from '@/utils/province.js'
	import getLocationInfo from '@/mixin/getLocationInfo.js'
	import {
		getMapDistance
	} from '@/utils/utils.js'
	export default {
		mixins: [initData, getLocationInfo],
		data() {
			return {
				buinessId: 0,
				keyword: '',
				cityData: provinceData,
				show: false,
				id: ''
			};
		},
		computed: {
			distance() {
				return function(item) {
					const longitude = this.cache.getCache('longitude')
					const latitude = this.cache.getCache('latitude')

					if (latitude && longitude) {
						return (getMapDistance(latitude, longitude, item.lat, item.lng)).toFixed(2)
					}
				}

			}
		},
		onLoad(e) {
			this.onReady()

			if (e && e.id) {
				this.id = e.id
				console.log(this.id, '咋回事====')
			}
			this.miXinInit()

		},
		methods: {
			confirm(val) {
				this.$emit('confirm', val[val.length - 1].label)
			},
			submit() {
				if (this.buinessId) {
					console.log(this.id)
					this.$u.api.transferBusiness({
						id: this.id,
						buinessId: this.buinessId
					}).then(res => {
						uni.showToast({
							title: '转给商家成功',
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/order/order'
						})
					})
				} else {
					uni.showToast({
						title: '请选择自提点',
						icon: 'none'
					})
				}
			},
			search() {
				
				this.toReset()
				this.miXinInit()
			},
			// 请求前的参数处理
			beforeInit() {
				this.apiUrl = "appBusiness/appBusinessList";
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					areaName: this.mixinDistrict,
					name: this.keyword

				};

				this.params = {
					...params
				};
			},
			confirmCity(val) {
				this.mixinDistrict = val[val.length - 1].label
				this.toReset()
				this.miXinInit()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.point_title {
		padding: 30rpx;
		font-size: 30rpx;
		color: #101010;
	}

	.point_list {
		display: flex;
		flex-direction: column;

		.point_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			.left {
				display: flex;

				.point_msg {

					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.distance {
						color: $u-type-primary;
					}
				}

				.point_img {
					width: 150rpx;
					height: 150rpx;
					margin-right: 23rpx;
					border-radius: 20rpx;

				}
			}

		}
	}

	.search_box {
		padding: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;



		.city_title {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.title {
				font-size: 28rpx;
				color: #000000;
				margin-right: 6rpx;
				white-space: nowrap;
			}
		}
	}
</style>
